<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions,
} from "@pureadmin/utils";
import { userLoginRegionRank } from "@/api/log";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme,
});

const data = ref<any[]>([]);

function init() {
  setOptions({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      // @ts-expect-error
      right: true,
    },
    series: [
      {
        name: "用户登录区域",
        type: "pie",
        top: "20%",
        radius: "80%",
        center: ["40%", "50%"],
        data: data.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

userLoginRegionRank().then(res => {
  res.forEach(chart => {
    data.value.push({
      name: chart.name,
      value: chart.count,
    });
  });
  init();
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
</template>
